<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container">
<form class="form-horizontal">
    <div class="form-group" style="width: 300px;margin:0 auto;">
        <label for="inputEmail3" class="control-label">username</label>
        <div>
            <input name="username" type="text" class="form-control" id="inputEmail3" placeholder="username" v-model="username">
        </div>
    </div>
    <div class="form-group" style="width: 300px;margin:0 auto;">
        <label for="inputPassword3" class="control-label">Password</label>
        <div class="c">
            <input name="password" type="password" class="form-control" id="inputPassword3" placeholder="Password" v-model="password">
        </div>
    </div>
    <div class="form-group" style="width: 300px;margin:10px auto;">
        <div class="c">
            <button type="button" class="btn btn-default" v-on:click="add()">Sign in</button>
        </div>
    </div>
</form>
<table class="table table-bordered" style="margin: 30px 0;padding: 0">
    <tr class="bg-info">
        <td>no.</td>
        <td>username</td>
        <td>password</td>
        <td>op</td>
    </tr>
    <tr v-for="(item,index) in myData">
        <td>{{index + 1}}</td>
        <td>{{item.username}}</td>
        <td>{{item.password}}</td>
        <td>
            <button type="button" class="btn btn-info" v-on:click="noIndex=index" data-toggle="modal" data-target="#layer">del</button>
        </td>
    </tr>
    <tr v-show="myData.length==0">
        <td colspan="4" class="text-center">
            <p>暂无数据</p>
        </td>
    </tr>
</table>

    <!-- 模态框 弹出框 -->
    <div role="dialog" class="modal fade" id="layer">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span>×</span>
                    </button>
                    <h4 class="modal-title">确认删除吗？</h4>
                </div>
                <div class="modal-body text-right">
                    <button class="btn btn-primary btn-sm" data-dismiss="modal">取消</button>
                    <button class="btn btn-danger btn-sm" type="button" data-dismiss="modal" v-on:click="del(noIndex)">确认</button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="http://cdn.bootcss.com/vue/2.2.1/vue.js"></script>
<script>
    var vm = new Vue({
        el : ".container",
        data : {
            username : '',
            password : '',
            noIndex: -100,
            myData : [

            ]
        },
        methods : {
            add : function(){
                this.myData.push({
                    username: this.username,
                    password: this.password
                });
                this.username = '';
                this.password = '';
            },
            //此处使用了模态框，所以需要将索引传递
            //nowindex类似于定义了一个变量，再将变量当参数传给noindex（nowindex）
            del : function(index){
                this.myData.splice(index,1);
            }
        }
    });
</script>
</html>